<template>
  <div class="courseBaseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程详细信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="form" :model="form" label-width="100px" class="content">
      <el-form-item label="课程编号">
        <el-input v-model="form.courseID" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="form.courseNameCN" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="英文名称">
        <el-input v-model="form.courseNameEN" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="课程平台">
        <el-input v-model="form.coursePlatform" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="课程性质">
        <el-input v-model="form.courseNature" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="课程类别">
        <el-input v-model="form.courseNature" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="学分">
        <el-input v-model="form.credit" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="学时">
        <el-input v-model="form.courseHour" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="学时分配">
        <el-row class="clear-mp">
          <el-col :span="9">
            <el-checkbox v-model="teachHourChecked">
              讲课:
              <el-input v-model="form.teachHour" :readonly="true" size="small"></el-input>
            </el-checkbox>
          </el-col>
          <el-col :span="9">
            <el-checkbox v-model="experimentHourChecked">
              实验:
              <el-input v-model="form.experimentHour" :readonly="true" size="small"></el-input>
            </el-checkbox>
          </el-col>
        </el-row>
        <el-row class="clear-mp">
          <el-col :span="9">
            <el-checkbox v-model="computerHourChecked">
              上级:
              <el-input v-model="form.computerHour" :readonly="true" size="small"></el-input>
            </el-checkbox>
          </el-col>
          <el-col :span="9">
            <el-checkbox v-model="practiceHourChecked">
              实践:
              <el-input v-model="form.practiceHour" :readonly="true" size="small"></el-input>
            </el-checkbox>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="每周学时">
        <el-input v-model="form.weeklyHour" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="记分方式">
        <el-input v-model="form.scoringWay" :readonly="true"></el-input>
      </el-form-item>
      <el-form-item label="能力要求">
        <el-input v-model="form.courseRequirement" :readonly="true"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'courseBaseInfo',
    data () {
      return {
        form: {
          trainingCourseID:'',
          trainingSchemeID:'',
          courseID: '',
          courseNameCN: '',
          courseNameEN: '',
          coursePlatform: '',
          courseNature: '',
          credit: '',
          courseHour: '',
          teachHour: '',
          experimentHour: '',
          computerHour: '',
          practiceHour: '',
          weeklyHour: '',
          scoringWay: '',
          courseRequirement: '',
          term:'',
          academicYear:'',
          remark1:'',
          remark2:''
        },
        checked: 'true',
        url: 'http://localhost:8080/TeachingMIS'
      }
    },
    created () {
      this.getCourseInfo();
    },
    methods: {
      getCourseInfo() {
        var trainingCourseID = this.$route.query.trainingCourseID;
        this.$http.post(`http://localhost:8080/TeachingMIS/trainingCourse/getCourseByID`, {
          trainingCourseID: trainingCourseID
        }).then((res) => {
          // 响应成功回调
          this.form = res.body;
        }, (err) => {
          // 响应错误回调
          console.log("服务器异常！");
        })
      }
    },
    computed: {
      teachHourChecked(){
        return this.form.teachHour ? true : false
      },
      experimentHourChecked(){
        return this.form.experimentHour ? true : false
      },
      computerHourChecked(){
        return this.form.computerHour ? true : false
      },
      practiceHourChecked(){
        return this.form.practiceHour ? true : false
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .clear-mp {
    margin: 0;
    padding: 0;
  }
</style>
